<!-- 详情页 -->
<template>
  <div>
    <a-affix class="m-anchor-affix" v-if="array.length !== 0">
      <a-collapse default-active-key="1" class="m-anchor-collapse">
        <a-collapse-panel key="1" header="内容锚点">
          <a-anchor
            :target-offset="targetOffset"
            class="m-anchor"
            wrapperClass="m-anchor"
          >
            <a-anchor-link
              v-for="item in array"
              :key="item.text"
              :href="'#' + item.id"
              :title="item.text"
            />
          </a-anchor>
        </a-collapse-panel>
      </a-collapse>
    </a-affix>

    <template v-if="!isFound">
      <a-result title="Not Found Article Details" sub-title="没有该文章">
        <template #icon>
          <a-icon type="frown" style="color: red;" />
        </template>
        <template #extra>
          <a-button type="primary" @click="getBack()">
            返回首页
          </a-button>
        </template>
      </a-result>
    </template>
    <div id="vue-details" v-else>
      <HeaderMenuSider ref="headerSider" />
      <div style="padding: 10px;">
        <a-page-header
          style="border: 1px solid rgb(235, 237, 240)"
          :title="detail.title"
        >
          <a-descriptions size="small" :column="3">
            <a-descriptions-item label="作者">{{
              detail.author
            }}</a-descriptions-item>
            <a-descriptions-item label="发布时间">{{
              detail.createTime
            }}</a-descriptions-item>
            <a-descriptions-item label="是否解决" v-if="detail.type === '疑问'">
              <!-- 未解决图标 -->

              <a-icon
                :type="detail.solve ? 'smile' : 'frown'"
                theme="twoTone"
                :two-tone-color="detail.solve ? '#52c41a' : 'red'"
              />
              <!-- <a-icon type="smile" theme="twoTone" two-tone-color="#52c41a" /> -->
            </a-descriptions-item>
          </a-descriptions>
        </a-page-header>
        <a-card
          style="width: 100%; padding: 10px; margin-top:20px;"
          :loading="isLoading"
        >
          <div class="vidtor-preview">
            <div
              id="vue-article-details"
              style="margin-top:10px; display: none"
              v-html="detail.details"
            ></div>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getArticleDetail } from "@/apis/article";
import HeaderMenuSider from "@/components/Sider/HeaderMenuSider";
import Vditor from "vditor";
import "vditor/dist/index.css";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { HeaderMenuSider },
  data() {
    // 这里存放数据
    return {
      detail: {},
      array: [],
      isLoading: true,
      targetOffset: undefined,
      isFound: true,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getDetails() {
      let id = this.$route.params.id;
      getArticleDetail(id)
        .then((res) => {
          res.data.details = res.data.details;
          this.detail = res.data;
          let details = res.data.details;
          document.title = this.detail.title;
          this.isLoading = false;
          let that = this;
          that.array = [];
            //       Vditor.preview(
            //   document.getElementById("vue-article-details"),
            //   details
            // );
          setTimeout(function() {
    
            $("#vue-article-details").css("display","block");
            $("#vue-article-details")
              .children()
              .each(function() {
                let id = $(this).children("a")[0];
                let txt = $(this).text();
                let tagName = $(this).prop("tagName");
                if (
                  id !== "undefined" &&
                  id !== undefined &&
                  tagName.indexOf("H") > -1
                ) {
                  let data = {
                    text: txt,
                    id: $(id).attr("id"),
                  };
                  // H1 级别
                  that.array.push(data);
                }
              });
          }, 500);
        })
        .catch(() => {
          this.isFound = false;
        });
    },
    getBack() {
      this.$router.push("/");
      window.location.href = "/";
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeRouteEnter(to, from, next) {
    let tempRouterPath = from.fullPath;
    next((vm) => {
      vm.$store.commit("setTempRouterPath", tempRouterPath);
      vm.beforeUrl = from.path;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.targetOffset = window.innerHeight / 2;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    this.getDetails();
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.m-anchor-collapse {
  width: 473px;
  overflow-y: hidden;
}
.m-anchor {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: visible;
  min-height: 250px;
}

.m-anchor-affix {
  position: absolute;
  top: 85px;
  left: 65%;
  z-index: 500;
}

.m-anchor-collapse::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

.m-anchor-affix::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}
.m-anchor::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}
</style>
